<template>
	<view class="content">
		<!-- 确认兑换弹窗 -->
		<uni-popup :show="type === 'trans'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">请输入安全密码</text>
				<view class="safeinpbox" style="margin-bottom: 30upx;">
					<input type="password" value="" placeholder="输入安全密码"/>
				</view>
				<view class="uni-tip-group-button">
					<text class="backbtn" @click="confirmit()" >确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="fixedtop">
			<view class="pageHeader">
				{{headtitle}}
				<view class="generalBack" @click="backpage()">
				  <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
				</view>
				<view class="headxieyi" @click="goxieyi()">协议</view>
			</view>
			<!-- header -->
			<view class="topbluebox">
				<view class="flex aic jsb">
					<text>我的持有量/该文件总量</text>
					<text>{{fileobj.file_num?fileobj.file_num:0}} /{{fileobj.grant_files}}</text>
				</view>
				<view class="flex aic jsb">
					<text>单份文件价值</text>
					<text>￥{{fileobj.valuepershare}}</text>
				</view>
				<view class="flex aic jsb">
					<text>该文件总价值</text>
					<text>￥{{fileobj.total_valuepershare}}</text>
				</view>
			</view>
			<!-- other message -->
			<view class="whitebox">
				<view class="flex aic jsb">
					<view class="borderitem devidein flex aic jsb">
						<text>文件总业绩</text>
						<text class="bluetxt">{{fileobj.totalperformance}}</text>
					</view>
					<view class="borderitem devidein flex aic jsb">
						<text>每份价值</text>
						<text class="bluetxt">￥{{fileobj.valuepershare}}</text>
					</view>
				</view>
				<view class="borderitem flex aic jsb longitem">
					<text>今日文件分红额</text>
					<text class="bluetxt">￥{{fileobj.dividendamounttoday}}</text>
				</view>
				<view class="borderitem flex aic jsb longitem">
					<text>今日持有量</text>
					<text class="bluetxt">{{fileobj.grant_files-fileobj.file_num}}</text>
				</view>
				<view class="flex aic jsb longitem">
					<view class="borderitem devidein flex aic jsb">
						<text>用户今日分红</text>
						<text class="bluetxt">￥{{fileobj.today_bonus}}</text>
					</view>
					
					<view class="borderitem devidein flex aic jsb">
						<text>用户历史分红总额</text>
						<text class="bluetxt">￥{{fileobj.sum_bonus}}</text>
					</view>
				</view>
			</view>
			<view class="sortbox whitebox flex aic jsb">
				<view v-for="(item,index) in sortlist"  :key="index" class="sortitem" :class="{active: topindex === index}" @click="topclick(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="regoodbox">
			<scroll-view scroll-y="true" >
				<view v-if="recordlist.length<=0" class="empty">
					<image src="/static/empty.png" mode="widthFix"></image>
					<view class="empty-tips">
						暂无记录~
					</view>
				</view>
				<view v-for="(sitem,sindex) in recordlist" :key="sindex" class="recorditem">
					<view class="flex" v-if="topindex!==3">
						<image src="../../static/a-8.png" style="width: 50upx;height: 50upx;margin-right: 26upx;"></image>
						<view class="rightitem">
							<view class="stitle">{{sitem.msg}}</view>
							<view class="stime">{{sitem.add_time_time}}</view>
						</view>
					</view>
					<view v-else>
						<view class="flex aic jsb" style="color: #666;">
							<view style="font-size: 28upx;">
								<text>分红份数:</text>
								<text style="color: #333;">{{sitem.number}}份</text>
							</view>
							<view>
								<text>分红金额:</text>
								<text style="color: #EC6104;font-weight: 600;">￥{{sitem.price}}</text>
							</view>
						</view>
						<view style="color: #999;font-size: 26upx;margin-top: 8upx;">分红日期: {{sitem.add_time_time}}</view>
					</view>
				</view>
				<view class="loading">{{ loadingText }}</view>
			</scroll-view>
		</view>
		<view class="btmfunc flex aic jc-center">
			<text class="funcitem func1" @click="gofunc(1)">兑换</text>
			<text class="funcitem func2" @click="gofunc(2)">收取</text>
			<text class="funcitem func3" @click="gofunc(3)">转出</text>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				headtitle:'',// 头部标题 
				fileobj:{},//文件详细信息
			
				userToken:'',// token
				page:0,
				type:'',
				recordlist:[],
				topindex:0,
				sortlist:[{name:'收获',state:1},{name:'转入',state:3},{name:'转出',state:4},{name:'分红',state:0}],
				loadingText:'加载中...',
				// sort
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.fileobj =JSON.parse(options.item) 
			that.headtitle =that.fileobj.code?that.fileobj.code:'文件夹'
			that.get_file_record()
		},
		components:{
			uniPopup
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			goxieyi(){
				uni.navigateTo({
					url:'agreement?id='+this.fileobj.id
				})
			},
			gofunc(state){
				if(state==1&&this.fileobj.is_exchange==0){
					uni.showToast({
						title:'此文件不支持兑换',
						icon:'none'
					})
					return
				}
				if(state==3&&this.fileobj.is_interconversion==0){
					uni.showToast({
						title:'此文件不支持转出',
						icon:'none'
					})
					return
				}
				let pageUrl = state==1?'hall':(state==2?'filecode?item='+JSON.stringify(this.fileobj):'transout?status=0&fileitem='+JSON.stringify(this.fileobj))
				uni.navigateTo({
					url:pageUrl
				})
			},
			topclick(i,ind){
				let that = this
				that.topindex = ind
				that.recordlist = []
				that.page=0
				that.get_file_record()
			},
			onReachBottom: function() {
				this.get_file_record();
			},
			
			// 获取记录信息
			get_file_record(){
				let that = this
				uni.showNavigationBarLoading();
				let oindex = that.topindex
				let oitem = that.sortlist[that.topindex]
				let postdata = {},posturl= ''
				postdata = oindex!==3?{token:that.userToken,class:oitem.state,m:that.page,n:6}:{id:that.fileobj.id,m:that.page,n:6},
				posturl = oindex!==3?'file/FileRecord':'File/fileDividend'
				let getlist=[]
				postAjax(posturl,postdata,function(res){
					if(res.code==0){
						getlist = res.data
						if(getlist.length>0){
							that.recordlist = that.recordlist.concat(getlist);
							that.page++
						}else{
							that.loadingText = '已加载全部';
						}
						if (that.recordlist.length < 10) {
							that.loadingText = '';
						}
						uni.hideNavigationBarLoading();
					}else{
						getlist = []
						uni.hideNavigationBarLoading();
					}
				})
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #f9f9f9;}
	.fixedtop{
		position: fixed;top:0;left:0;z-index:999;width: 100%;background-color: #f5f5f5;
	}
	.pageHeader{height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.headxieyi{width: 88upx;height: 44upx;line-height: 44upx;font-size: 28upx;text-align: center;background: #fff;color: #1D84E8;border-radius: 4upx;
		position: absolute;top:80upx;right:30upx
	}
	.btmfunc{width: 100%;height: 96upx;background-color: #fff;position: fixed;left:0;right:0;bottom:0;z-index: 999;}
	.funcitem{width: 180upx;text-align: center;padding: 18upx 0;color: #fff;border-radius: 6upx;font-size: 30upx;}
	.func1{background-color: #FF4242;}
	.func2{background-color: #6C63FF;margin: 0 30upx;}
	.func3{background-color: #1D84E8;}
	
	.regoodbox{padding: 760upx 0 100upx;font-size: 28upx;}
	.topbluebox{background-color: #1D84E8;line-height: 1.75;padding: 0 30upx 8upx;color: #fff;font-size: 26upx;}
	.flex-1{flex:1}
	.whitebox{background-color: #fff;padding:14upx 30upx;font-size: 28upx;}
	.sortbox{margin-top: 4upx;}
	.borderitem{border:2upx solid #ddd;border-radius: 4upx;padding:16upx 10upx;}
	.devidein{width:45%;}
	.bluetxt{color: #1D84E8;}
	.longitem{margin-top: 14upx;}
	.sortitem{padding: 12upx 0;width: 134upx;text-align: center;color: #999;font-size: 28upx;border:2upx solid #ddd;border-radius: 4upx;}
	.sortitem.active{color: #fff;background-color: #1D84E8;border:2upx solid #1D84E8}
	.loading {
		text-align: center;
		line-height: 50px;
		font-size: 30upx;
		color: #666;
	}
	
	.recorditem{height: 94upx;margin-top: 4upx;padding:24upx 30upx;background-color: #fff;}
	.stitle{font-size: 28upx;color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
	.stime{margin-top: 20upx;color: #666666;font-size: 26upx;}
	.rightitem{max-width: 580upx;}
	
	.empty {
		width: 100%;
		padding-top: 30upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #f9f9f9;
	
	}
	
	.empty image {
		width:240upx;
		margin-top: 50upx;
	}
	
	.empty-tips {
		display: flex;
		font-size: 30upx;
		margin-top: 20upx;
		color: #666;
	
	}
	
</style>
